<template>
    <div>
        <template>
        <el-form :inline="true" :model="personCertDoneForm">
            <el-row>
                <el-col :span="22">
                    <el-form-item label="昵称">
                        <el-input v-model="personCertDoneForm.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="personCertDoneForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="审核人">
                        <el-input v-model="personCertDoneForm.auditorName"></el-input>
                    </el-form-item>
                    <el-form-item label="审核状态">
                        <el-select v-model="personCertDoneForm.auditStatus" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核时间">
                        <el-date-picker v-model="personCertDoneForm.auditTimeStart" type="date"  placeholder="选择日期">
                        </el-date-picker>
                        <el-date-picker v-model="personCertDoneForm.auditTimeEnd" type="date"  placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="1" class="text-right">
                    <el-form-item>
                        <el-button type="primary" @click="fetchCertpersonalNotAudited(personCertDoneForm)">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table v-loading.body="loading" :data="personUserList" border height="364" row-class-name="text-center">
            <el-table-column show-overflow-tooltip prop="nickname" label="昵称">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="mobile" label="手机号码">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="name" label="真实姓名">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="applyTime" label="申请时间">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="auditStatus" label="审核状态">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="auditorName" label="审核人">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="auditTime" label="审核时间">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="option" label="操作">
                <template scope="scope">
                    <span  class="color02 pointer" @click='openPersonCertDetailDialog(scope.$index, personUserList)'>
                        <span>
                            详情
                        </span>
                    </span>
                    <span  class="color02 pointer" @click='openPersonalCertHistoryDialog(scope.$index, personUserList)'>
                        <span>
                            审核记录
                        </span>
                    </span>

                </template>
            </el-table-column>
        </el-table>
    </template>
    <template>
        <div class="pagination-wrapper clearfix"  v-if="personUserListPagination.totalPage>1">
            <div class="fr font-14 mt-15">
                <span class="page-num mr-25">
            总数：<span v-text="personUserListPagination.totalCount"></span> 每页显示
                <span v-text="personUserListPagination.pageSize"></span>条 共
                <span v-text="personUserListPagination.totalPage"></span>页
                </span>
                <el-pagination @current-change ="personalUserListChange" :current-page="personUserListPagination.currentPage" :page-size="personUserListPagination.pageSize" layout="prev, pager, next"
                    :total="personUserListPagination.totalCount" class="fr">
                </el-pagination>
            </div>
        </div>
    </template>
    <!-- 实名认证详情 -->
    <template>
        <el-dialog title="实名认证详情" :visible.sync="certPersonalDetailDialogStatus">
            <div>
                <el-row>
                    <el-col :span="8">
                        <span> 真实姓名：<span v-text="activeDialogData.name"></span></span>
                    </el-col>
                    <el-col :span="8">
                        <span> 身份证号：<span v-text="activeDialogData.idCardNum"></span></span>
                    </el-col>
                    <el-col :span="8">
                        <span> 认证申请时间：<span v-text="activeDialogData.applyTime"></span></span>
                    </el-col>
                </el-row>
            </div>
            <div class="person-cert-detail mt-25" v-loading="loadingCertDetail">
                <el-row>
                    <el-col :span="8">
                        <img :src="personCertDetail.idCardFrontPhotoPath" alt="">
                    </el-col>
                    <el-col :span="8">
                        <img :src="personCertDetail.idCardBackPhotoPath" alt="">
                    </el-col>
                    <el-col :span="8">
                        <img :src="personCertDetail.idCardHoldPhotoPath" alt="">
                    </el-col>
                </el-row>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="certPersonalDetailDialogStatus = false">关闭</el-button>
            </div>
        </el-dialog>
    </template>
    <!--   审核记录  -->
    <template>
        <el-dialog title="审核记录" size="large" :visible.sync="certPersonalHistoryDialogStatus">
          <el-table v-loading.body="loadingCertPHD" :data="auditHistoryList" border row-class-name="text-center">
            <el-table-column show-overflow-tooltip prop="auditorName" label="审核人">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="auditTime" label="审核时间">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="auditStatus" label="审核结果">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="reasonType" label="原因分类">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="reason" label="通知内容">
            </el-table-column>
        </el-table>
         <div slot="footer" class="dialog-footer">
                <el-button @click="certPersonalHistoryDialogStatus = false">关闭</el-button>
            </div>
        </el-dialog>
    </template>
    </div>
</template>
<style lang="css">
.main-container .el-input {
    width: 100px;
}
.el-form--inline .el-form-item{
    margin-right: 5px;
}
</style>
<script>
    import {
        getCertPersonalHasAudited,
        postCertPersonal,
        getPersonalCertDetail,
        getPersonalReasonList,
        getUserAcountAuditHistory
    } from '@/api/user.js'
    export default {
        data () {
            return {
                loading: false,
                loadingCertPHD: false,
                loadingCertDetail: false,
                options: {},
                // 列表信息分页
                personUserListPagination: {
                    currentPage: 1,
                    pageSize: 10,
                    totalCount: 120,
                    totalPage: 12
                },
                // 列表信息搜索表单
                personCertDoneForm: {
                    nickname: '',
                    name: '',
                    auditorName: '',
                    auditStatus: '',
                    auditTime: '',
                    auditTimeStart: '',
                    auditTimeEnd: ''
                },
                // 用户列表
                personUserList: [],
                // 用户认证信息
                personCertDetail: {},
                // 认证历史
                auditHistoryList: [],
                // 弹出框信息
                activeDialogData: {},
                // 认证信息弹出框
                certPersonalDetailDialogStatus: false,
                // 审核记录弹出框
                certPersonalHistoryDialogStatus: false,
                personCertDone: {}
            }
        },
        methods: {
            // // 获取代办列表数据
            fetchCertpersonalNotAudited (data) {
                this.loading = true
                getCertPersonalHasAudited(data).then((response) => {
                    this.loading = false
                    if (response.data.code === 0) {
                        this.personUserList = response.data.data.data
                        this.personUserListPagination = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取失败')
                    }
                }).catch(function (err) {
                    this.loading = false
                    console.log(err)
                })
            },
            // 翻页
            personalUserListChange (page) {
                let param = this.personCertDoneForm
                param.currentPage = page
                param.pageSize = this.personUserListPagination.pageSize
                this.fetchCertpersonalNotAudited(param)
            },
            // 打开审核详情对话框
            openPersonCertDetailDialog (index, data) {
                this.activeDialog(index, data, true)
                this.certPersonalDetailDialogStatus = true
                this.fetchCertDetail(this.activeDialogData.id)
            },
            // 获取审核详情
            fetchCertDetail (id) {
                this.loadingCertDetail = true
                getPersonalCertDetail({id}).then((response) => {
                    this.loadingCertDetail = false
                    if (response.data.code === 0) {
                        this.personCertDetail = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取失败')
                    } else throw response
                }).catch(function (err) {
                    this.loadingCertDetail = false
                    console.log(err)
                })
            },
              // 打开审核历史对话框
            openPersonalCertHistoryDialog (index, data) {
                this.activeDialog(index, data, true)
                this.certPersonalHistoryDialogStatus = true
                this.fetchUserAcountAuditHistory(this.activeDialogData.id)
            },
            // 获取用户认证历史信息
            fetchUserAcountAuditHistory (id) {
                this.loadingCertPHD = true
                getUserAcountAuditHistory({id, type: 1}).then((response) => {
                    this.loadingCertPHD = false
                    if (response.data.code === 0) {
                        this.auditHistoryList = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取失败')
                    }
                }).catch(function (err) {
                    this.loadingCertPHD = false
                    console.log(err)
                })
            },
            // 对话框弹出，填写弹出框的显示数据
            activeDialog (index, data, isActive = false) {
                if (isActive) {
                    this.activeDialogData = data[index]
                } else {
                    this.activeDialogData = {}
                }
            },
            // 关闭对话框
            closeDialog (formName) {
                this.resetForm(formName)
            },
            // 重置表单
            resetForm (formName) {
                this.$refs[formName].resetFields()
            },
            // 个人认证提交审核信息
            certPersonalSubmit: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = this.certPersonalForm
                        postCertPersonal(data).then((response) => {
                            if (response.data.code === 0) {
                                // this.$message('修改成功')
                                this.certPersonalDetailDialogStatus = false
                                console.log(this.certPersonalForm.expireDate)
                            } else if (response.data.code === 1) {
                                // this.$message('修改失败')
                            }
                        }).catch(function (err) {
                            console.log(err)
                        })
                    }
                })
            },
            // 获取原因列表
            fetchPersionalReasonList: function () {
                getPersonalReasonList().then((response) => {
                    if (response.data.code === 0) {
                        this.reasonList = response.data.data
                        console.log(response.data.data)
                    } else if (response.data.code === 1) {
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            }
        },
        created () {
            this.fetchCertpersonalNotAudited()
        }

    }

</script>
